<template>
  <div class="bg">
    <nav-com
      title="互助消费金明细"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <van-tabs
      style="margin-top:2px"
      v-model="active"
      sticky
      @click="onClick"
    >
      <van-tab
        v-for="index in tabList"
        :title="index"
        :key="index"
      >
        <div class="dataList" v-for="item in dataList" :key="item.id">
          <div>
            <div class="title">{{item.memo}}</div>
            <div class="time">{{item.createtime | dateFormat}}</div>
          </div>
          <div class="num">
            {{active?'':'+'}}{{item.wallet}}
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import moment from "moment";
import navCom from "@/component/nav";
import { helpTogetherDeatil } from "@/api/api";
export default {
  components: {
    navCom,
  },
  filters:{
    dateFormat(val){
      return moment(val*1000).format('YYYY-MM-DD')
    }
  },
  data() {
    return {
      tabList: ["收入记录", "支出记录"],
      active: 0,
      dataList:[]
    };
  },
  created() {
    this.initData();
  },
  methods: {
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    initData() {
      helpTogetherDeatil({ type: this.active+1 })
        .then((result) => {
          if(result.data.code == 1){
            this.dataList = result.data.data.data
            console.log(this.dataList)
          }
        })
        .catch((err) => {});
    },
    onClick(name, title){
      console.log(name, title)
      this.active =  name
      this.initData()
    }
  },
};
</script>

<style>
.bg {
  background: #f2f3f7;
  height: 100vh;
}
.dataList {
  background: #fff;
  margin: 10px 20px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-radius: 8px;
}
.dataList .title {
  font-size: 20px;
}
.dataList .time {
  color: #ccc;
  font-size: 14px;
  margin-top: 10px;
}
.dataList .num {
  color: #fe4b20;
  font-size: 22px;
}
</style>